Especificación Técnica:
Rol: Actúa como Desarrollador Senior Experto en Frontend y Arquitectura de Software.
Objetivo: Construir siguiendo directrices estrictas de escalabilidad.
1. ARQUITECTURA Y STACK (ES MODULES)
- Vanilla JS Moderno (ES6+): Uso obligatorio de Arrow Functions, Desestructuración y Template Literals.
- Estructura de Carpetas (Imperativo):
No uses un archivo único. Debes implementar ES Modules.
La estructura de archivos debe ser:
index.html (Importa js/app.js con type="module")
css/style.css
- Carpeta
js/ conteniendo:
data.js: Lógica de negocio, LocalStorage y cálculos.
ui.js: Manipulación del DOM y renderizado.
utils.js: Formateadores de moneda y fechas.
app.js: Inicialización y gestión de eventos.
- Sin dependencias npm: Solo librerías vía CDN (ej:
jspdf).
2. DISEÑO VISUAL Y UX
- Tipografía Nativa (San Francisco / Roboto):
El CSS debe implementar el siguiente stack para que la app se sienta nativa en iOS y Android:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- Minimalismo & Glassmorphism: Paneles semitransparentes (
backdrop-filter: blur(10px)).
- Tema Automático: Soporte para Dark Mode mediante
prefers-color-scheme.
- Inputs Móviles: Inputs con altura táctil correcta y
inputmode="decimal" para montos.
3. FUNCIONALIDAD PRINCIPAL (CRUD & DATOS)
Implementa las siguientes entidades y lógica:
- Entidades:
- Persistencia: Todo debe guardarse en
localStorage para persistencia local.
- Buscador: Filtrado en tiempo real en la vista principal.
- Lógica Específica:
4. REQUISITOS AVANZADOS (MONEDA Y REPORTES)
Gestión Administrativa (Modal):
- Botón de Configuración (⚙️) en el header que abre un Modal.
- Opciones del Modal: Generar PDF, Exportar JSON (Backup), Importar JSON (Restaurar).
Lógica de Moneda (Switch Global):
- Implementar un switch global para alternar entre EUR (€) y HNL (L).
- Formato EUR: 1.500,00 € (Punto miles, Coma decimales).
- Formato HNL: L 1,500.00 (Coma miles, Punto decimales).
- El cambio debe actualizar toda la interfaz inmediatamente.
Generado automáticamente para desarrollo Clean Code.